<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-video-text-1920 flex-box" :class="className" :style="getStyle('head')">
      <!--   视频区域    -->
      <div class="flex-box-left item" v-if="(optionsInfo.checkList).includes(1)" :style="getStyle('videoArea')">
        <div class="video-area" :key="getOnlyId()" ref="videoInfo">
          <div class="video-area-inside" v-if="devType">
            <i class="el-icon-video-play"></i>
          </div>
          <video class="video" preload='auto' autoplay controls="controls" v-if="!devType" @ended="(e)=>handleEnded(e)"
                 :data-src="getSource()">
            <source :src="getSource()" type="video/mp4"/>
            <source :src="getSource()" type="video/ogg"/>
            很抱歉 , 当前浏览器不支持现有视频格式 ~
          </video>
        </div>
      </div>
      <!--   轮播图区域   -->
      <div class="flex-box-middle item" v-if="(optionsInfo.checkList).includes(2)" :style="getStyle('carouselArea')"
           :key="getOnlyId()">
        <template v-if="mounted&&!!swiperPicture&&!!(swiperPicture.length)">
          <div class="swiper-container" :key="carouselKey">
            <div class="swiper-wrapper">
              <div class="swiper-slide"
                   v-for="(item,index) in (optionsInfo.carouselInfo)"
                   :data-swiper-autoplay="`${(item.delay || 5)*1000}`"
                   :key="`${item.id}_${index}` || index"
                   v-swiper='{
                          current:index,
                          length:(optionsInfo.carouselInfo).length
                     }'
              >
                <img class="picture" :class="{'fill': optionsInfo?.fill}" :src="getPictureSource(item.url)" alt="图片"/>
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </template>
      </div>
      <!--   文本区域   -->
      <div class="flex-box-right item" v-if="(optionsInfo.checkList).includes(3)" :style="getStyle('contentArea')">
        <div class="text-area">
          <div class="header">{{ optionsInfo.title }}</div>
          <div class="content">
            <div class="container">
              <ScrollEditY :content="optionsInfo.content || ''" :pageDuration="10"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {getQueryString, pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {v4 as uuid} from "uuid";
import {buildParentApi} from "@/utils/designer/util";

export default {
  name: "scene-video-text-1080-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollEditY,
    CompOperate,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      number: 0,
      mounted: false,
      optionsInfo: Object(),
      carouselKey: uuid(),
      swiperPicture: [1, 2, 3, 4, 5, 6],
      header: require("@a/images/design/header-03.jpg"),
    }
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },

    // 获取视频资源
    getSource() {
      return function () {
        let {video} = this.optionsInfo;
        if (video && video.length) {
          return `${video[this.number].url}?t=${this.getOnlyId()}&info=${video[this.number].url}`;
        }

      }
    },

    // 获取图片资源
    getPictureSource() {
      return function (row) {
        return `${row}?t=${this.getOnlyId()}`
      }
    },

    className() {
      let {videotHide, textHide} = (this.field.options.infoPublicConfig1080);
      if (videotHide && !textHide) {
        return 'text-hide'
      } else if (!videotHide && textHide) {
        return 'video-hide'
      }
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.field?.options?.infoPublicConfig1080) || Object();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "margin", pxToVw(info.margin));
            Reflect.set(Obj, "height", pxToVw(info.height));
            return Obj;
          case "videoArea":
            Reflect.set(Obj, "flex-basis", `${info.videoHeight}%`);
            return Obj
          case "carouselArea":
            Reflect.set(Obj, "flex-basis", `${(info.carouselHeight)}%`);
            return Obj;
          case "contentArea":
            Reflect.set(Obj, "flex-basis", `${(info.contentHeight)}%`);
            return Obj;
        }
      };
    },

  },

  mounted() {
    this.handleOnMounted();
    this.$nextTick(() => {
      this.mounted = true;
      // this.executeMethod('getVideoMedias');
    })
  },

  methods: {
    handleEnded(event) {
      let {video} = this.optionsInfo
      let videoInfo = event.target.currentSrc;
      let info = getQueryString('info', videoInfo)
      const findIndex = this.$lodash.findIndex(video, {url: info});
      if (!this.$lodash.isUndefined(findIndex) && !this.$lodash.isNull(findIndex)) {
        let next = (findIndex + 1)
        if (video.length > next) {
          this.number = next
        } else {
          this.number = 0
        }
      } else {
        this.number = 0
      }
    },

    // 等待候诊滚动结束
    handleScrollEnd() {
      console.log('等待就诊滚动结束');
    },

    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          await this.$store.dispatch('setWaitingPatientInfo', patientList)
          if (this.$refs.scroll) {
            this.$refs.scroll.reset()
          }
          break
          //   关于视频播放
        case "getVideoMedias":
          let element = (this.$refs.videoInfo);
          if (element) {
            let params = Object();
            let info = (this.optionsInfo) || Array();
            const rect = element.getBoundingClientRect();
            // let ratio = window.devicePixelRatio
            let ratio = 1;
            const positionInfo = {
              width: Math.ceil(rect.width),
              height: Math.ceil(rect.height),
              top: parseInt(rect.top),
              right: parseInt(rect.right),
              bottom: parseInt(rect.bottom),
              left: parseInt(rect.left),
            };
            Reflect.set(params, 'positionInfo', positionInfo);
            Reflect.set(params, 'video', info['video']);
            this.parentApi.executeParentMethod('playVideoMedias', params);
          }
          break
      }
    }
  },

  destroyed() {
    this.unregisterFromRefList();
    this.mounted = false;
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = (val.options.config);
        this.carouselKey = uuid();
        this.optionsInfo = val?.options[key] || Object();
      },
      deep: true,
      immediate: true
    }
  },

};
</script>

<style lang="scss" scoped>
.scene-video-text-1920 {
  background-color: transparent;
  color: #333;
  height: 100%;
  line-height: 100%;
  flex-direction: column;

  .item {
    &:last-child {
      margin-bottom: 0 !important;
    }
  }

  .flex-box-left {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    flex-basis: calc(40%);
    margin-bottom: 30px;
    border: none;

    .video-area {
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .video-area-inside {
        width: 100%;
        height: 100%;
        min-width: 100%;
        overflow: hidden;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.8);

        i {
          font-size: 150px;
          color: #EBEEF5;
        }
      }
    }

    .video {
      height: 100% !important;
      max-width: 100% !important;
      object-fit: contain;
    }
  }

  .flex-box-middle {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    flex-basis: calc(40%);
    margin-bottom: 30px;

    .swiper-container {
      border-radius: 12px;
      height: 100%;

      .swiper-slide {
        width: 100%;
        height: 100%;
        font-size: 38px;
        line-height: 76px;
        display: flex;
        text-align: center;
        align-items: center;

        .picture {
          width: 100% !important;
          height: 100% !important;
          object-fit: contain !important;
        }
        .fill{
          width: 100% !important;
          height: 100% !important;
          object-fit: cover !important;
          object-position: center; /* 图片居中显示 */
        }
      }
    }
  }

  .flex-box-right {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    flex-basis: calc(100% - 40%);

    .text-area {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .header {
        background: #FFFFFF;
        padding: 18px 0;
        text-align: center;
        border-bottom: 1px solid #DDDDDD;
        font-size: 48px;
        line-height: 48px;
        color: #0059B3;
        @include fontWeight()
      }

      .content {
        height: calc(100% - 84px);
        box-sizing: border-box;
        padding: 22px;

        .container {
          line-height: 64px;
          font-size: 32px;
          height: 100%;
        }
      }
    }
  }
}
</style>